<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.0/vue.js"></script>
</head>
<body>
    <!-- 一个重要的内置关系：VueComponent.prototype.__proto__===Vue.prototype -->
    1
    <script>
         Vue.config.productionTip = false;
        //  定义student组件
        const student=Vue.extend({
            template:`<div>
        <h2>学生姓名：{{studentName}}</h2>
        <h2>学生年龄：{{age}}</h2>
            </div>
            `,
           data(){
            return{
                studentName:'罗雨',
                age:18
            }
           }
        });
        // 定义school组件,里面嵌套student组件
        const school={
            template:`<div>
                <h2>学校名称：{{schoolName}}</h2>
                <h2>学校地址：{{address}}</h2>
                <hr>
                <student></student>
            </div>
            `,
            data(){
                return{
                schoolName:"尚硅谷",
                address:"北京",
                }
            },
            components:{
                student
            }
        };
        // 定义hello组件
        const hello=Vue.extend({
            template:`<div>
                <h2>你好啊！{{name}}</h2>
                </div>`,
            data(){
                return{
                    name:'Tom'
                }
            }
        });
        //定义APP组件,里面嵌套scool,hello
        const app={
            template:`<div>
                <school></school>
                <hello></hello>
                </div>`,
            components:{
                school,
                hello
            }
        };
        // 创建vm 
        new Vue({
            el:"#root",
            template:`<app></app>`,
            components:{
                app
            }
        });
    </script>
</body>
</html>